<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<#include "/resource.ftl"/>
</head>
<body class="hold-transition skin-purple-light sidebar-mini">
<div class="wrapper">
<#assign selectindex=2 />
<#assign selectchild=3 />
<#include "/dashboard/mainheader.ftl"/>
    <!-- Left side column. contains the logo and sidebar -->

<#include "/dashboard/mainsidebar.ftl"/>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <section class="content">
            <div style="background-color: #ffffff;border-radius: 8px;">
                <div style="font-size: 24px;font-weight: bold;color: #504e6b;padding: 10px;display: flex;align-items: center;">
                    <div>用户管理</div>
                    &nbsp;
                    <a class="btn btn-info btn-sm"  data-toggle="modal"
                       data-target=".create_modal">
                        新增用户
                    </a>
                </div>
                <hr style="margin: 0;"/>
                <div style="padding: 10px;">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <th style="width: 10px">#</th>
                            <th>姓名</th>
                            <th>昵称</th>
                            <th>邮箱</th>
                            <th>手机</th>
                            <th>角色</th>
                        </tr>
                        <#list users as item>
                        <tr>
                            <td>${item_index+1}</td>
                            <td style="word-break: break-all;">${item.realName!""}
                                <#if user.id != item.id>
                                <div>
                                    <a href="#" title="修改" class="badge bg-light-blue-gradient" data-toggle="modal"
                                       data-target=".editor_modal"
                                       onclick="editor(this,'${item.id}','${item.realName!""}','${item.nickName!""}','${item.email!""}','${item.cellphone!""}','${item.role}')"><i
                                            class="fa fa-pencil"></i></a>
                                    <a href="#" class="badge bg-red" title="删除"><i class="fa fa-trash"></i></a>
                                    <a href="#" class="badge bg-red" title="${(item.forbid==0)?string('禁用','启用')}""><i class="fa ${(item.forbid==0)?string('fa-ban','fa-circle-o')}"></i></a>
                                </div>
                                </#if>
                            </td>
                            <td style="word-break: break-all;">${item.nickName!""}</td>
                            <td style="word-break: break-all;">${item.email!""}</td>
                            <td style="word-break: break-all;">${item.cellphone!""}</td>
                            <td style="word-break: break-all;">${(item.role == 'ADMIN')?string('管理员','运维人员')}<#if user.id == item.id>(自己)</#if></td>
                        </tr>
                        </#list>
                        </tbody>
                    </table>
                <#--<ul class="pagination" style="margin: 0;">-->
                <#--<li><a href="#">&laquo;</a></li>-->
                <#--<li><a href="#">1</a></li>-->
                <#--<li><a href="#">2</a></li>-->
                <#--<li class="active"><a href="#">3</a></li>-->
                <#--<li><a href="#">4</a></li>-->
                <#--<li><a href="#">5</a></li>-->
                <#--<li><a href="#">&raquo;</a></li>-->
                <#--</ul>-->
                </div>
            </div>
        </section>
    </div>
    <!-- Large modal -->

    <div class="modal fade create_modal" tabindex="-1" role="dialog" >
    <#include "create.ftl"/>
    </div>
    <div class="modal fade editor_modal" tabindex="-1" role="dialog" >
    <#include "edit.ftl"/>
    </div>
<#include "/dashboard/mainfooter.ftl"/>
</div>
<script src="/js/app.js"></script>
<script>
    function editor(e, id, realName, nickName, email, cellphone, role) {
        vm.id = id;
        vm.realName = realName;
        vm.nickName = nickName;
        vm.email = email;
        vm.cellphone = cellphone;
        vm.role = role;
    }

    var vm = new Vue({
        el: '#editor',
        data: {
            id: '',
            realName: '',
            nickName: '',
            email: '',
            cellphone: '',
            role: 'OPERATOR'
        }
    });
</script>
</body>
</html>